<template>
    <div>
        <div class="about">
            <lazy-component>
               <div class="container" v-if="info">
                <div class="head">
                    <div class="head_top">
                        <div class="top_le" @click="$router.back()">
                            <div class="iconfont">
                                &#xe710;
                            </div>
                        </div>
                        <div class="top_rig">
                            <div class="iconfont">&#xe8b4;</div>
                            <div class="iconfont">&#xe695;</div>
                            <div class="iconfont">…</div>
                        </div>
                    </div>
                    <div class="head_con">
                        <img :src="info.result.recipe.photo_path" alt="">
                    </div>
                </div>
                <div class="title">
                    <h1>{{ info.result.recipe.title }}</h1>
                    <ul>
                        <li>精品</li>
                        <li>独家</li>
                        <li>浏览{{ info.result.recipe.comments_count}}</li>
                        <li>收藏{{ info.result.recipe.dish_count }}</li>
                    </ul>
                </div>
                <div class="main">
                    <div class="outher">
                        <div class="img">
                            <img :src="info.result.recipe.user.user_photo" alt="">
                        </div>
                        <div class="info">
                            <h4>
                                {{ info.result.recipe.user.nickname }}
                            </h4>
                            <em>LV.{{ info.result.recipe.user.lvl }}</em>
                        </div>
                        <div :class="['follow',data.number == 1 ? 'opc':'']" v-show="!data.follow"
                        @click="follow(info.result.recipe.user)">关注</div>

                        <div :class="['over', data.number == 1 ? 'opc' : '']" v-show="data.follow"
                        @click="follow(info.result.recipe.user)">已关注</div>
                    </div>
                    <p>{{ info.result.recipe.cookstory }}</p>
                    <div class="list">
                        <div class="list_tit">
                            <div class="tit_le">
                                <div class="iconfont">
                                &#xe681;
                                </div>
                                <span>10~30分钟</span>
                            </div>
                            <div class="tit_rig">
                                <img src="https://i1.douguo.com/upload/note/1/8/d/18516d0904b76e46d2804aede541477d.png" alt="" v-if="(info.result.recipe.cook_difficulty_image == '')">
                                <img :src="info.result.recipe.cook_difficulty_image" alt="" v-else>
                                <span>切墩({{ info.result.recipe.cook_difficulty_text }})</span>
                            </div>
                        </div>
                        <ul>
                            <li>
                                <h2> <strong>食材清单</strong></h2>
                                <span class="color"> <small>加入采购清单</small></span>
                            </li>
                            <li v-for="(item,index) in info.result.recipe.major" :key="index">
                                <h2>{{ item.title }}</h2>
                                <span>{{ item.note }}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="step">
                        <div class="step_tit">
                            <h2>烹饪步骤</h2>
                            <span @click="read">点击图片进入烹饪模式</span>
                        </div>
                        <div class="step_list" v-for="(item,index) in info.result.recipe.cookstep" :key="index">
                            <div class="tit">步骤{{ item.position }}</div>
                            <div class="img">
                                <img :src="item.image" alt="">
                            </div>
                            <p>
                                {{ item.content }}
                            </p>
                        </div>
                        
                        <div class="step_foot">
                            {{ info.result.recipe.release_time }} · 北京市
                        </div>
                    </div>
                </div>
                <div class="comment">
                    <div class="com_top">
                        <h2 id="a">热门评论</h2>
                        <span class="color">{{data.comment.length}}条评论</span>
                    </div>
                    <div class="comm_add" @click="data.show = true">
                        <i></i>
                        <input type="text" placeholder="说点什么，让TA也认识爱做饭的你">
                    </div>
                    <div class="comm_list" v-for="(item,index) in data.comment" :key="index">
                        <div class="list_top">
                            <div class="comm_list_le">
                                <div class="img">
                                    <img :src="item.p" alt="">
                                </div>
                                <div class="comm_info">
                                    <div class="name">
                                        <h4>{{item.n}}</h4>
                                        <em>LV.{{item.lvl}}</em>
                                    </div>
                                    <div class="form">
                                        来自{{item.city}}
                                    </div>
                                </div>
                            </div>
                            <div class="comm_list_rig">
                                <i :class="[item.bool ? 'con' : '']" @click="good(index)"></i>
                                {{item.good}}
                            </div>
                        </div>
                        <div class="list_cont">
                            <p>
                               {{item.content}}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="pass">
                    <div class="pass_wrap" @click="jump('edit')">
                        <div class="iconfont">
                            &#xe62b;
                        </div>
                        传学做
                    </div>
                </div>
                <div class="footer">
                    <ul>
                        <li @click="data.show = true">
                           
                                <input type="text" placeholder="说点什么">
                            
                        </li>
                        <li @click="data.show = true">
                            <div class="iconfont">&#xe607;</div>
                            <span>评论</span>
                        </li>
                        <li :class="[data.number == 1 ? 'opc' : '']">
                           <i class @click="add($event)" id="coll"></i>
                            <span>收藏</span>
                        </li>
                        <!-- <li @click="jump('edit')">
                            <div class="iconfont font">&#xe62b;</div>
                            <span>传学做</span>
                        </li> -->
                    </ul>
                </div>
                <van-action-sheet v-model:show="data.show" title="评论">
                    <div class="uls">
                        <div class="list" v-for="(item,index) in data.comment" :key="index">
                            <div class="list_le">
                                <img :src="item.p" alt="">
                            </div>
                            <div class="list_rig">
                                <div class="name">
                                    <div class="name_le">
                                        <h4>{{item.n}}</h4>
                                        <em>LV.{{item.lvl}}</em>
                                    </div>
                                    <div class="name_rig">
                                    <i :class="[item.bool ? 'con' : '']" @click="good(index)"></i>
                                        {{item.good}}
                                    </div>
                                </div>
                                <div class="from">来自{{item.city}}</div>
                                <div class="content">
                                    {{item.content}}
                                </div>
                            </div>
                        </div>
                        <div class="list_footer">
                            <img src="../assets/img_gu/Us.png" alt="">
                            <input type="text" placeholder="我想说两句" v-model="data.val">
                            <span @click="release">发送</span>
                        </div>
                    </div>
                </van-action-sheet>
                </div>
            </lazy-component>
            <div class="load" v-if="!info" @click="back">
                <van-loading  color="#FFC200" vertical>加载中...</van-loading>
            </div>
        </div>
    </div>
</template>

<script>
import { ref } from "vue"
import { getJsonAbout } from "../api/home.js";
import { useRoute,useRouter } from 'vue-router'
import { reactive, onUpdated } from '@vue/runtime-core'
import { useStore } from "../store/index";
    export default {
        setup(){
            let store = useStore(); 
            let router = useRoute();
            let userouter=useRouter()
            let info = ref(null);
            let dataId = null;
            let data = reactive({
                show:false,
                comment:store.comment,
                val:"",
                follow:false,
                number:0
            })
            function jump(src) {//页面跳转
                userouter.push({
                    path: '/' + src
                })
            }
            function getdata() {
                dataId = router.query.id;//接收详情页ID
                if (dataId == 0){
                    info.value = store.person;
                    data.number = 1;
                    console.log(info.value);
                }else {

                    getJsonAbout(dataId).then(data => {
                        console.log(data);//undefined
                        info.value = data;
    
    
                        // data.forEach(item=>{
                        //     if (item.result.recipe.cook_id == dataId){
    
                        //         info.value = item
                        //     }
                        // });
                        // console.log(info.value);
                    })
                }
            }
            function follow(user) {//关注
                if(data.follow){
                    let index = store.follow.findIndex(item =>{
                        return item.user_id == user.user_id
                    })
                    store.follow.splice(index,1)
                }else{

                    store.follow.push(user)
                }
                data.follow = !data.follow
            }
           
            getdata()
            // info.value = store.person;
            // console.log(info.value);
            getJsonAbout(dataId).then(data => {
                console.log(data);//undefined
                info.value = data;


                // data.forEach(item=>{
                //     if (item.result.recipe.cook_id == dataId){
                        
                //         info.value = item
                //     }
                // });
                // console.log(info.value);
            })
            
            function read() {
                console.log("no")
            }
            function add(e) {//添加/移出收藏
                let id = info.value.result.recipe.cook_id;
                if (e.target.classList.contains("con")) {
                    let index = store.caihistory.findIndex(item => {
                        return item == id
                    })
                    console.log(index);
                    store.caihistory.splice(index, 1)

                } else {
                    store.caihistory.push(id);

                }
                e.target.classList.toggle("con");
                console.log(store.caihistory);
            }

            function release() {//发布评论
                let value = data.val;
                data.comment.push({
                    n: "ikun",
                    p: "http://i1.douguo.net/upload/photo/0/e/1/70_u57078294375116213406.jpeg",
                    city: "广州市",
                    lvl: 1,
                    good: 0,
                    content: value
                })
                data.val = '';
            }

            function good(index) {//点赞功能
                if (data.comment[index].bool){
                    data.comment[index].good -= 1;
                    
                } else{
                    data.comment[index].good += 1;

                }
                data.comment[index].bool = !data.comment[index].bool
            }

            function creat() {//判断是否已经关注/收藏
                let coll = document.querySelector("#coll");
                let id = info.value.result.recipe.cook_id;
                store.caihistory.forEach(item =>{
                    if (item == id) {
                        coll.classList.add("con")
                    }
                })

                let user = info.value.result.recipe.user.user_id;
                store.follow.forEach(item =>{
                    if (item.user_id == user){
                        data.follow = true;
                    }
                })
            }           
            onUpdated(() =>{
                creat()
            }) 

            // 加载不出来，返回上一页
            let back=()=>{
                console.log("db");
                userouter.go(-1)
            }
            return{
                info,
                getdata,
                router,
                read,
                data,
                add,
                release,
                good,
                back,
                follow,
                jump
            }
        }
    }
</script>

<style lang="scss" scoped>
.about{
    background-color: #F7F8FA;
    .opc{
        opacity: 0;
    }
    .head{
        position: relative;
        .head_top{
            background-color: rgba($color: #000000, $alpha: .3);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            .iconfont{
                font-size: 20px;
                color: #fff;
            }
            .top_le{
                &>.iconfont{
                    font-size: 28px;
                }
                padding-left: 6px;
            }
            .top_rig{
                padding-right: 16px;
                display: flex;
                width: 138px;
                justify-content: space-between;
                align-items: center;
            }
        }
        .head_con{
            width: 100%;
            max-height: 350px;
            overflow: hidden;
            &>img{
                width: 100%;
            }
        }
    }
    .title{
        padding: 20px 0 40px 16px;
        h1{
            font-size: 24px;
            font-weight: normal;
            padding-bottom: 10px;
        }
        ul{
            display: flex;
            li{
                color: #828282;
                &::after{
                    content: "";
                    width: 3px;
                    height: 3px;
                    border-radius: 50%;
                    background-color: #333;
                    display: inline-block;
                    vertical-align: middle;
                    margin: 0 8px;
                }
                &:last-of-type{
                    &::after{
                        display: none;
                    }
                }
            }
        }
    }
    .main{
        .outher{
            display: flex;
            align-items: center;
            position: relative;
            .img{
                padding-right: 8px;
                padding-left: 16px;
                &>img{
                    width: 44px;
                    height: 44px;
                    border-radius: 50%;
                    display: block;
                }
            }
            .info{
                display: flex;
                h4{
                    font-size: 13px;
                    font-weight: normal;
                }
                em{
                    font-size: 13px;
                    color: #D7AA3E;
                    padding-left: 5px;
                    font-style: inherit;
                }
            }
            .follow{
                position: absolute;
                top: 6px;
                right: 16px;
                width: 78px;
                height: 32px;
                border-radius: 16px;
                text-align: center;
                line-height: 32px;
                font-size: 12px;
                color: #333;
                background-color: #FFC200;
            }
            .over{
                position: absolute;
                top: 6px;
                right: 16px;
                width: 78px;
                height: 32px;
                border-radius: 16px;
                text-align: center;
                line-height: 32px;
                font-size: 12px;
                color: #333;
                background-color: #ccc;
            }
        }
        p{
            padding: 32px 16px;
            font-size: 18px;
        }
        .list{
            .list_tit{
                display: flex;
                justify-content: space-between;
                padding: 0 32px 32px;
                .tit_le{
                    display: flex;
                    &>.iconfont{
                        font-size: 24px;
                        color: #878787;
                    }   
                }
                .tit_rig{
                    display: flex;
                    align-items: center;
                    img{
                        width: 25px;
                        height: 25px;
                        display: block;
                    }
                }
                span{
                    font-size: 15px;
                }
            }
            ul{
                padding: 0 16px;
                li{
                    display: flex;
                    justify-content: space-between;
                    line-height: 42px;
                    h2{
                        font-size: 18px;
                        color: #333;
                        font-weight: normal;
                    }
                    span{
                        font-size: 18px;
                        color: #333;
                    }
                    .color{
                        color: #008388;
                    }
                   
                }
            }
        }
        .step{
            .step_tit{
                display: flex;
                justify-content: space-between;
                padding: 20px 16px;
                h2 {
                    font-size: 18px;
                    color: #333;
                    font-weight: bold;
                }
            
                span {
                    font-size: 14px;
                    color: #008388;
                }
            }
            .step_list{
                .tit{
                    font-size: 14px;
                    padding:20px 16px 16px;
                }
                .img{
                    padding: 0 22px;
                    img{
                        width: 100%;
                        display: block;
                    }
                }
                p{
                    font-size: 16px;
                    color: #333;
                    padding: 15px 16px 0 16px;
                }
            }
            .step_foot{
                color: #C6C6C6;
                font-size: 12px;
                padding-left: 16px;
                padding-top: 12px;
            }
        }
    }
    .comment{
        padding-top: 45px;
        padding-bottom: 35px;
        .com_top{
            display: flex;
            align-items: center;
            padding-left: 16px;
            h2 {
                font-size: 18px;
                color: #333;
                font-weight: bold;
            }
        
            span {
                font-size: 14px;
                color: #008388;
                padding-left: 5px;
            }
        }
        .comm_add{
            padding: 20px 16px 0 16px;
            display: flex;
            position: relative;
            i{
                background-image: url('../assets/img_gu/1X.png');
                width: 26px;
                height: 26px;
                background-size: 100%;
                display: block;
                position: absolute;
                top: 28px;
                left: 24px;
            }
            input{
                border: 0px;
                padding-left: 45px;
                height: 44px;
                border-radius: 22px;
                flex: 1;
                background-color: #F6F6F6;
            }
        }
        .comm_list{
            .list_top{
                display: flex;
                justify-content: space-between;
                padding: 16px 16px 8px 16px;
                align-items: center;
                .comm_list_le{
                    display: flex;
                    align-items: center;
                    .img{
                        padding-right: 8px;
                        img{
                            width: 34px;
                            height: 34px;
                            display: block;
                            border-radius: 50%;
                        }
                    }
                    .comm_info{
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .name{
                            display: flex;
                            h4{
                                font-size: 14px;
                                color: #333;
                                font-weight: normal;
                            }
                            em{
                                color: #C4B375;
                                font-stretch: inherit;
                                font-size: 13px;
                                padding-left: 5px;
                            }
                        }
                        .form{
                            color: #CBCBCB;
                            font-size: 12px;
                        }
                    }
                }
                .comm_list_rig{
                    display: flex;
                    align-items: center;
                    i {
                            display: block;
                            width: 13px;
                            height: 13px;
                            background: url('../assets/img_gu/eX.png') no-repeat;
                            background-size: 100%;
                            margin-right: 3px;
                        }
                    
                        .con {
                            background: url('../assets/img_gu/eY.png') no-repeat;
                            background-size: 100%;
                    
                        }
                }
            }
            .list_cont{
                padding: 0px 16px;
                p{
                    font-size: 13px;
                    color: #333;
                    padding: 0px;
                    padding-left: 48px;
                }
            }
        }
    }
    .pass{
        padding: 0px 16px 90px 16px;
        .pass_wrap{
            font-size: 18px;
            height: 48px;
            color: #333;
            background-color: #FFC200;
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            &>.iconfont{
                font-size: 24px;
                padding-right: 8px;
            }
        }
    }
    .footer{
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        background-color: #fff;
        padding: 18px 0;
        ul{
            padding: 0 22px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            li{
                display: flex;
                input{
                    border: 0px;
                    width:160px;
                    padding-left: 14px;
                    height: 35px;
                    border-radius: 17px;
                    background-color: #F5F5F5;
                }
                i{
                    width: 23px;
                    height: 23px;
                    display: block;
                    background: url('../assets/img_gu/c1.png') no-repeat;
                    background-size: 100%;
                }
                .con{
                    background: url('../assets/img_gu/c0.png') no-repeat;
                    background-size: 100%;
                }
                &>.iconfont{
                    font-size: 23px;
                    font-weight: bold;
                }
                &>.font{
                    font-weight: normal;
                }
                span{
                    padding-left: 3px;

                }
            }
        }
    }
    .van-action-sheet{
        .uls{
            padding-bottom: 50px;
            position: relative;
            .list{
                display: flex;
                padding: 0 16px 20px 16px;
                .list_le{
                    img{
                        width: 34px;
                        height:34px;
                        display: block;
                        border-radius: 50%;
                    }
                    padding-right: 8px;
                }        
                .list_rig{
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    .name{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .name_le{
                            align-items: center;
                            display: flex;
                            h4{
                                font-size: 14px;
                                color: #333;
                                font-weight: normal;
                                margin-right: 5px;
                            }
                            em{
                                color: #d8c560;
                                font-size: 12px;
                            }
                        }
                        .name_rig{
                            display: flex;
                            align-items: center;
                            color: #333;
                            font-size: 12;
                            i{
                                display: block;
                                width: 13px;
                                height: 13px;
                                background: url('../assets/img_gu/eX.png') no-repeat;
                                background-size: 100%;
                                margin-right: 3px;
                            }
                            .con{
                                background: url('../assets/img_gu/eY.png') no-repeat;
                                background-size: 100%;

                            }
                        }
                    }
                    .from{
                        color: #cbcbcb;
                        font-size: 12px;
                    }
                    .content{
                        font-size: 13px;
                        color: #333;
                        line-height: 26px;
                    }
                }
            }
            .list_footer{
                position: absolute;
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                img{
                    width: 23px;
                    height: 24px;
                    display: block;
                    margin-left: 16px;
                }
                input{
                    height: 38px;
                    border: 0px;
                    width: 234px;
                    background-color: #f2f2f2;
                    border-radius: 19px;
                    padding-left: 5px;
                }
                span{
                    background-color: #D7AA3E;
                    color: #fff;
                    height: 20px;
                    padding: 3px 8px;
                    border-radius: 4px;
                    margin-right: 16px;
                }
            }
        }
    }
    .load{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%);
    }
}
</style>